<template>
  <div class="box">
    <div class="filter-container">
      <el-row class="search-row">
        <el-col :span="12">
      <el-input
        placeholder="档案号/姓名/手机号"
        v-model="search.name"
        style="width: 250px"
        class="filter-item"
      >
      <el-button slot="append" icon="el-icon-search" @click="getReportList()"></el-button>
      </el-input>
      </el-col>  
      </el-row>
    </div>
    <el-table
      height="620px"
      size="small"
      current-row-key="id"
      :data="dataList"
      stripe
      highlight-current-row
    >
      <el-table-column
        type="index"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="orderdate"
        label="体验时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="hMemberofthefile.hFn"
        label="档案号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="hMemberofthefile.hName"
        label="姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ordertype"
        label="手机号码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="hMemberofthefile.hPhone"
        label="预约类型"
        align="center"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="setmeal.name"
        label="检测套餐"
        header-align="center"
        ></el-table-column>
    <el-table-column
        align="center"
        label="预约状态"
        prop="orderstatus"
        header-align="center"
    ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEditCheckitem(scope.$index,scope.row)" size="mini">确认预约</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteCheckitem(scope.$index,scope.row)">取消预约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background     
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5, 10, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { list, removeTOrder, updateTOrderA } from "@/api/RReporttoupload";

export default {
    data() {
    return {
      dataList: [],//当前页要展示的分页列表数据
      total:0,//总记录数
      //查询参数
      search: {
        offset: 1,
        limit: 5,
        name: "",
      },
    };
  },
  methods:{
    //查询
    getReportList() {
      list(this.search)
        .then((response) => {
          console.log(response);
          this.total = response.data.total;
          this.dataList = response.data.rows;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1;
      this.getReportList();
    },
    handleCurrentChange(val) {
      this.search.offset = val;
      this.search.currentPage = val;
      this.getReportList();
    },
    handleEditCheckitem(index, row){
        updateTOrderA(row)
         .then(response => {
           this.getReportList()
         })
         .catch(error => {
           this.outputError(error)                
        })
    },
    handleDeleteCheckitem(index, row){
    this.$confirm('确定取消预约吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        removeTOrder(row.id)
        .then(response => {
          this.getReportList()
        })
        .catch(error => {
          this.outputError(error)                
        })
      })
      .catch(() => {})
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })      
    } 
  },
  created() {
    this.getReportList();
  },
}
</script>

<style>

</style>